<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link href="../js/layui/css/layui.css" rel="stylesheet" media="all">
		<link href="../css/common.css" rel="stylesheet" />
		<style>
			body {
				position: absolute; width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; background-color: #A0EEE1;
			}
			.title_area {
				margin: 0 auto; width: 100%; height: 30px; font-family: InfoFont; text-align: center; font-size: 30px; line-height: 30px; padding: 5px 0 0 0; background-color: #55aaff;
			}
			.count_down_area {
				margin: 0 auto; width: 100%; height: 50px; text-align: center; font-size: 40px; line-height: 50px; background-color: #55aaff;
			}
			.count_down_area .num {
				width: 50px; text-align: center; font-family: NumberFont;
			}
			.count_down_area .com {
				width: 5px; text-align: center; font-family: NumberFont;
			}
			.info_area {
				width: 100%; height: 240px; display: table;
				background: linear-gradient(to top, 
												rgba(0,0,0,0.6),
												rgba(0,0,0,0.1) 3%,
												rgba(0,0,0,0) 20%,
												rgba(0,0,0,0) 80%,
												rgba(0,0,0,0.1) 97%,
												rgba(0,0,0,0.6));
			}
			.info {
				 text-align: center; font-family: InfoFont; font-size: 80px; line-height: 120px; word-break: break-word; display: table-cell; vertical-align: middle;
			}
			.button_area {
				width: 100%; text-align: center; position: fixed; bottom: 20px;
			}
			.button {
				max-width: 200px; width: 30%; height: 40px; font-family: InfoFont; #font-size: 20px; line-height: 44px; 
			}
			.show {
				height: 100px; width: 100px; line-height: 22px;
			}
		</style>
		<script src="../js/layui/layui.all.js"></script>
	</head>

	<body>
		<div id="title_area" class="title_area">
			TOTAL: <span id="count">1</span>
		</div>
		<div id="count_down_area" class="count_down_area">
			<span class="num" id="hours">00</span>
			<span class="com">:</span>
			<span class="num" id="minutes">00</span>
			<span class="com">:</span>
			<span class="num" id="seconds">00</span>
			<span class="com">:</span>
			<span class="num" id="milliSeconds">00</span>
		</div>
		<div id="info_area" class="info_area">
			<div id="info" class="info"></div>
		</div>
		<div id="button_area" class="button_area">
			<button id="startButton" class="layui-btn layui-btn-radius layui-btn-normal button start" onclick="whenClick();">START</button>
			<button id="showButton" class="layui-btn layui-btn-radius button show" onclick="show();">NEXT</button>
			<button id="clearButton" class="layui-btn layui-btn-radius layui-btn-danger button clear" onclick="reset();">CLEAR</button>
		</div>
		<script src="../js/prepare.js"></script>
		<script type="text/javascript">
			var param = GetRequest(),
				questionData, errorMsg = '',
				name, title;
			if (param && param.n) {
				name = param.n;
				loadJS('../data/' + name + '.js', function() {
					document.title = title || param.t;
					$('#count').html(spells.length);
				});
			} else {
				errorMsg = '内容获取失败';
				layer.alert(errorMsg);
			}
			
			var $ = layui.jquery;
			var layer = layui.layer;
			var usedSpells = [];

			var milliSeconds = $("#milliSeconds");
			var seconds = $("#seconds");
			var minutes = $("#minutes");
			var hours = $("#hours");
			var time = 0;
			var pre_time = 0;
			var intervals = 0;
			var pre_intervals = 0;
			var flag;
			var timeo;
			var inputValue = $("#startButton");
			var infoArea = $("#info");
			var showButton = $("#showButton");

			function show() {
				if (inputValue.html() != "STOP") {
					return;
				}
				if (spells.length == usedSpells.length) {
					infoArea.html('<font style="color: red;">DONE!</font>');
					stop();
				} else {
					var length = spells.length;
					c = spells[Math.floor(Math.random() * length)];
					while (usedSpells.indexOf(c) != -1) {
						c = spells[Math.floor(Math.random() * length)];
					}
					usedSpells.push(c);
					infoArea.html(c);
					var used_length = usedSpells.length;
					if(used_length<length) {
						showButton.html('<br>NEXT<br>(' + usedSpells.length + '/' + length + ')');
					} else {
						showButton.html('TAP<br>TO<br>FINISH');
					}
				}
			}

			function whenClick() { //  开始/暂停
				if (inputValue.html() == "START" || inputValue.html() == "CONTINUE") {
					reset();
					inputValue.html("READY");
					infoArea.html('<font style="color: red;">3</font>');
					timeo = setTimeout(function() {
						infoArea.html('<font style="color: red;">2</font>');
						timeo = setTimeout(function() {
							infoArea.html('<font style="color: red;">1</font>');
							timeo = setTimeout(function() {
								infoArea.html('<font style="color: red;">GO!</font>');
								timeo = setTimeout(function() {
									start();
								}, 500);
							}, 500);
						}, 500);
					}, 500);
				} else if (inputValue.html() == "READY") {
					return;
				} else {
					// inputValue.val()="CONTINUE";
					inputValue.html("START");
					stop();
				}
			}

			function reset() { //  清零
				stop();
				milliSeconds.html("00");
				seconds.html("00");
				minutes.html("00");
				hours.html("00");;
				time = 0;
				pre_time = 0;
				intervals = 0;
				pre_intervals = 0;
				infoArea.html('');
			}

			function start() { //  开始/继续
				infoArea.html('');
				var date = new Date();
				time = date.getTime();
				pre_time = time;
				inputValue.html("STOP");
				show();
				flag = setInterval("timeIncrement();", 10);
			}

			function timeIncrement() {
				date = new Date();
				intervals = date.getTime() - time + pre_intervals;
				var a = intervals % 1000 / 10;
				var b = intervals % 60000 / 1000;
				var c = intervals % 3600000 / 60000;
				var d = intervals / 3600000;
				milliSeconds.html((a < 10) ? ('0' + Math.floor(a)) : (Math.floor(a)));
				seconds.html((b < 10) ? ('0' + Math.floor(b)) : (Math.floor(b)));
				minutes.html((c < 10) ? ('0' + Math.floor(c)) : (Math.floor(c)));
				hours.html((d < 10) ? ('0' + Math.floor(d)) : (Math.floor(d)));
			}

			function stop() { //  暂停/停止
				inputValue.html("START");
				showButton.html('NEXT');
				date = new Date();
				pre_intervals += date.getTime() - pre_time;
				clearInterval(flag);
				clearTimeout(timeo);
				usedSpells = [];
			}
		</script>
	</body>

</html>
